<template>
  <div>
    <div class="titletopXX">
      <van-nav-bar
        size="30"
        :title="title"
        left-arrow
        right-text=""
        :fixed="true"
        @click-left="onClickLeft"
      />
    </div>
    <div class="pull-refresh">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="XXobj.name"
            name="接龙名称"
            label="接龙名称"
            placeholder="接龙名称"
            :rules="[{ required: true, message: '请填写接龙名称' }]"
          />
          <van-field
            v-model="XXobj.startTime"
            is-link
            readonly
            name="开始日期"
            label="开始日期"
            placeholder="开始日期"
            :rules="[{ required: true, message: '请选择开始日期' }]"
            @click="showPicker2 = true"
          />
          <van-field
            v-model="XXobj.endTime"
            is-link
            readonly
            name="截止日期"
            label="截止日期"
            placeholder="截止日期"
            :rules="[{ required: true, message: '请选择截止日期' }]"
            @click="showPicker = true"
          />
          <van-field
            v-model="XXobj.numTime"
            is-link
            readonly
            name="领餐时间"
            label="领餐时间"
            placeholder="领餐时间"
            :rules="[{ required: true, message: '请选择领餐时间' }]"
            @click="showPicker3 = true"
          />
          <van-field name="switch" label="选择餐品">
            <template #input>
              <div class="">
                <div class="XXBOx">
                  <div
                    class="XX"
                    v-for="(item, index) in tabS"
                    :key="item.name"
                  >
                    <van-tag
                      closeable
                      size="large"
                      type="primary"
                      @close="close(item)"
                    >
                      {{ item.name }}
                    </van-tag>
                  </div>
                </div>

                <div class="btn">
                  <van-button
                    native-type="button"
                    size="small"
                    icon="plus"
                    type="primary"
                    color="rgb(2, 117, 113)"
                    @click="TZXX()"
                  />
                </div>
              </div>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-datetime-picker
          v-model="momentDate"
          type="datehour"
          title="选择年月日小时"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-popup v-model:show="showPicker2" position="bottom">
        <van-datetime-picker
          v-model="startTimeDate"
          type="datehour"
          title="选择年月日小时"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showPicker2 = false"
          @confirm="onConfirm2"
        />
      </van-popup>
      <van-popup v-model:show="showPicker3" position="bottom">
        <van-datetime-picker
          v-model="numTimeDate"
          type="date"
          title="选择年月日"
          :min-date="maxDate"
          @cancel="showPicker3 = false"
          @confirm="onConfirm3"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import headerXX from "../../../../components/title.vue";
import moment from "moment";
import { Dialog, Notify } from "vant";
import { updateMealBack } from "@/api/realAssets/icsharedstation/CPXX/index.js";
export default {
  data() {
    return {
      minDate: "",
      maxDate: "",
      momentDate: "",
      startTimeDate: "",
      numTimeDate: "",
      title: "修改信息",
      siteData: JSON.parse(localStorage.getItem("siteData")),
      showPicker: false,
      showPicker2: false,
      showPicker3: false,
      currentDate: new Date(2025, 0, 1),
      dataIndex: JSON.parse(localStorage.getItem("CPGLxx")),
      tabS: [],
      XXobj: {
        id: "0",
        name: "",
        text: "",
        image: "",
        numTime: "",
        startTime: "",
        endTime: "",
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        remark: "",
        mealtodishlist: [],
      },
    };
  },
  created() {},
  mounted() {
    this.CS();
  },
  methods: {
    CS() {
      if (this.$route.query.XX) {
        let XX = JSON.parse(decodeURIComponent(this.$route.query.XX));
        this.tabS = XX.map((item, index) => {
          let obj = {
            name: item.name,
            id: item.mealtodishId,
            sort: index + 1 + "",
            type: item.TJtype, //type是推荐1，不推荐给空
            categoryId: item.TJtype, //type是推荐1，不推荐给空
            surplusNum: item.surplusNum,
            allNum: item.allNum,
          };
          return obj;
        });
      } else {
        this.maxDate = moment(this.dataIndex.endTime).toDate(); //选择日期不能高于
        this.minDate = moment(this.dataIndex.startTime).toDate(); //选择日期不能低于
        this.tabS = this.dataIndex.mealDishList.map((item, index) => {
          let obj = {
            name: item.name,
            id: item.mealtodishId,
            sort: index + 1 + "",
            type: item.type, //categoryId不推荐是0，是其他数字就不是0
            categoryId: item.categoryId, //categoryId不推荐是0，是其他数字就不是0
            surplusNum: item.surplusNum,
            allNum: item.allNum,
          };
          return obj;
        });
        // tabS.value = ;
      }
      //初始化截止日期
      this.momentDate = moment(this.dataIndex.endTime, "YYYY-MM-DD HH:mm:ss");
      this.XXobj.endTime = this.dataIndex.endTime;
      this.momentDate = this.momentDate.toDate();
      //开始时间
      this.startTimeDate = moment(
        this.dataIndex.startTime,
        "YYYY-MM-DD HH:mm:ss"
      );
      this.XXobj.startTime = this.dataIndex.startTime;
      this.startTimeDate = this.startTimeDate.toDate();
      //图片
      this.XXobj.image = this.dataIndex.image;
      //名称
      this.XXobj.name = this.dataIndex.name;
      //领取时间
      this.numTimeDate = moment(this.dataIndex.numTime, "YYYY-MM-DD");
      this.XXobj.numTime = this.dataIndex.numTime;
      this.numTimeDate = this.numTimeDate.toDate();
      //
      this.XXobj.text = this.dataIndex.text;
      this.XXobj.remark = this.dataIndex.remark;
      this.XXobj.id = this.dataIndex.id;
    },
    //选择截止时间
    onConfirm(val) {
      this.XXobj.endTime = moment(val).format("YYYY-MM-DD HH:mm:ss");
      this.momentDate = this.XXobj.endTime;
      this.showPicker = false;
    },
    onConfirm2(val) {
      this.XXobj.startTime = moment(val).format("YYYY-MM-DD HH:mm:ss");
      this.startTimeDate = this.XXobj.startTime;
      this.showPicker2 = false;
    },
    onConfirm3(val) {
      this.XXobj.numTime = moment(val).format("YYYY-MM-DD");
      this.numTimeDate = this.XXobj.numTime;
      this.showPicker3 = false;
    },
    onClickLeft() {
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_index",
      });
    },
    //点击删除
    close(val) {
      Dialog.confirm({
        title: "删除操作",
        message: `是否删除【${val.name}】`,
      })
        .then(() => {
          this.tabS = this.tabS.filter((item) => item.id !== val.id);
        })
        .catch(() => {
          // on cancel
        });
    },
    //跳转到接龙餐品列表
    TZXX() {
      let li = encodeURIComponent(JSON.stringify(this.tabS));

      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_JLCP_index",
        query: {
          XX: li, // 序列化对象
        },
      });
    },
    //点击提交
    onSubmit() {
      if (this.XXobj.startTime > this.XXobj.endTime) {
        Notify({ type: "warning", message: "开始日期不能大于截止日期" });
        return;
      }
      if (this.XXobj.numTime < this.XXobj.endTime) {
        Notify({ type: "warning", message: "领餐日期必须大于截止日期" });
        return;
      }
      this.XXobj.mealtodishlist = this.tabS.map((item, index) => {
        let obj = {
          id: item.id,
          sort: index + 1 + "",
          type: item.categoryId == 0 ? "0" : "1", //type是推荐1，不推荐给空
          surplusNum: item.surplusNum,
          allNum: item.allNum,
        };
        return obj;
      });
      console.log(this.XXobj);
      updateMealBack(this.XXobj).then((res) => {
        if (res.resultCode == 1) {
          Notify({ type: "success", message: res.data });
          //新增成功后返回页面页面
          this.$router.push({
            name: "rvicsharedstation-HT_ZGST_index",
          });
        } else {
          Notify({ type: "warning", message: "修改失败" });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../../static/css/index.less";
.pull-refresh {
  background: #fff;
}
.XXBOx {
  width: 100%;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.XX {
  // display: flex;
  // align-items: baseline;
  // flex-wrap: wrap;
  margin-right: 5px;
  margin-bottom: 10px;
}
.btn {
  margin-top: 10px;
}
.XXbtn {
  margin-left: 10px;
}
.titletopXX {
  height: 45px;
}
</style>